import React, { useRef, useState } from "react";

export default function Calculation() {
  const [count, setCount] = useState(0);
  const selectCount = useRef();

  function increase() {
    setCount(count + selectCount.current.value * 1);
  }
  function decrease() {
    setCount(count - selectCount.current.value * 1);
  }
  function increaseCountOdd() {
    if (count % 2 !== 0) {
      setCount(count + selectCount.current.value * 1);
    }
  }
  function increaseAsync() {
    setTimeout(() => {
      setCount(count + selectCount.current.value * 1);
    }, 1000);
  }

  return (
    <div>
      <h2>结果为：{count}</h2>
      <select ref={selectCount}>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <button onClick={increaseCountOdd}>如果结果为奇数再加</button>
      <button onClick={increaseAsync}>异步加</button>
    </div>
  );
}
